<template>
  <div class="main">
    <div class="input">
      <span>工单编号：</span>
      <el-input v-model="input" placeholder="请输入内容" style="width:200px" />
      <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
    </div>
    <div class="list">
      <el-button type="warning" icon="el-icon-circle-plus-outline" @click="addType">新建</el-button>
      <el-button type="warning" plain @click="strategy">批量操作</el-button>
      <el-table
        ref="multipleTable"
        :data="currentPageRecords"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" width="70" label="序号" :index="1 + 10 * (pageIndex - 1)" />
        <el-table-column label="设备编号" width="200" prop="innerCode" />
        <el-table-column prop="typename" label="设备型号" width="200" />
        <el-table-column prop="typeStr" label="详细地址" width="200" />
        <el-table-column prop="ownerName" label="合作商" width="150" />
        <el-table-column prop="typestatus" label="设备状态" width="150" />
        <el-table-column prop="address" label="操作" width="150" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" @click="handleClick(scope.row)">货道</el-button>
            <el-button type="text" @click="changepolicy(scope.row)">策略</el-button>
            <el-button type="text" @click="change(scope.row)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="updown">
      <div>共{{ totalCount }}条记录 第{{ pageIndex }} /{{ totalPage }} 页</div>
      <el-button-group>
        <el-button type="info" :disabled="pageIndex === 1" @click="previous">上一页</el-button>
        <el-button type="info" :disabled="pageIndex === Number(totalPage)" @click="next">下一页 </el-button>
      </el-button-group>
    </div>
    <addDialog :adddialog.sync="adddialog" />
    <strategy :strategydialog.sync="strategydialog" :is-selected.sync="isSelected" />
    <deldialog :deldialog.sync="deldialog" :inner-code="innerCode" />
    <editdialog :editdialog.sync="editdialog" :current-info="currentInfo" />
    <aisle :aisledialog.sync="aisledialog" :goods-info="goodsInfo"/>
  </div>
</template>

<script>
import { vmTypeSearchAPI, vmvmTypeAPI, vmPolicyAPI } from '@/api/vm'
import addDialog from './components/adddialog.vue'
import strategy from './components/strategy.vue'
import deldialog from './components/deldialog.vue'
import editdialog from './components/editdialog.vue'
import aisle from './components/aisle.vue'
export default {
  components: {
    addDialog,
    strategy,
    deldialog,
    editdialog,
    aisle
  },
  data() {
    return {
      input: '',
      totalCount: '',
      totalPage: '',
      currentPageRecords: [],
      pageIndex: 1,
      pageSize: 10,
      TypeArr: ['未投放', '运营', 0, '撤机'],
      adddialog: false,
      currentPageRecordsType: [],
      strategydialog: false,
      isSelected: [],
      deldialog: false,
      innerCode: {},
      editdialog: false,
      currentInfo: {},
      aisledialog: false,
      goodsInfo: {}
    }
  },
  created() {
    this.getVmTypeID()
    this.getvmType()
  },
  methods: {
    search() {
      this.getvmType({
        innerCode: this.input
      })
    },
    async getvmType(params) {
      const { data } = await vmTypeSearchAPI(params)
      console.log(data)
      this.totalPage = data.totalPage
      this.totalCount = data.totalCount
      this.currentPageRecords = data.currentPageRecords
      this.currentPageRecords.forEach(item => {
        const str = item.node.addr.substring(12)
        item.typeStr = str
        item.typestatus = this.TypeArr[item.vmStatus]
        const vmType = item.vmType
        let typename = ''
        this.currentPageRecordsType.forEach(item => {
          if (item.typeId === vmType) {
            typename = item.name
          }
        })
        item.typename = typename
      })
    },
    previous() {
      this.pageIndex = this.pageIndex - 1
      this.getvmType({
        pageIndex: this.pageIndex
      })
    },
    next() {
      this.pageIndex = this.pageIndex + 1
      this.getvmType({
        pageIndex: this.pageIndex
      })
    },
    addType() {
      this.adddialog = true
    },
    async getVmTypeID() {
      const res = await vmvmTypeAPI()
      this.currentPageRecordsType = res.data.currentPageRecords
    },
    strategy() {
      if (this.isSelected.length) {
        this.strategydialog = true
      } else {
        this.$message.warning('请勾选售货机')
      }
    },
    handleSelectionChange(val) {
      //  console.log(val)
      this.isSelected = val
    },
    async changepolicy(row) {
      const res = await vmPolicyAPI(row.innerCode)
      if (res.data) {
        this.deldialog = true
        this.innerCode = row
      } else {
        this.strategydialog = true
        this.isSelected.push(row)
      }
    },
    change(row) {
      this.editdialog = true
      // console.log(row)
      this.currentInfo = row
    },
    handleClick(row) {
      this.aisledialog = true
      // console.log(row)
      this.goodsInfo = row
    }
  }
}
</script>

<style lang="scss" scoped>
.input {
  width: 100%;
  height: 60px;
  background-color: #fff;
  margin-top: 30px;
  margin-bottom: 30px;
  margin-left: 20px;
  display: flex;
  align-items: center;
  font-size: 15px;
  color: #606266;

  .el-button {
    margin-left: 20px;
  }
}

.list {
  margin: 0 20px;
  background-color: #fff;
  padding: 20px;

  .el-button {
    margin-bottom: 20px;
  }
}

.updown {
  display: flex;
  justify-content: space-between;
  padding-top: 30px;
  padding-left: 40px;
  margin-bottom: 40px;

  .el-button-group {
    margin-right: 40px;
  }

  .el-button {
    margin-right: 40px;
  }
}
</style>
